<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/initial.css" />
    <!-- HTML5和CSS3的新特性兼容性可能相对差 -->
    <style>
      .new-input {
        width: 250px;
        border: 1px solid #000;
        margin: 50px auto;
      }

      .new-input input::placeholder {
        color: blue;
      }

      /* CSS3新增特性
          新增选择器：
            1.属性选择器[],权重为10,前面加标签会使权重增加
            2.结构伪类选择器:,权重为10,前面加标签会使权重增加
            3.伪元素选择器（重要）::,权重为1
          新增盒子模型box-sizing
          新增滤镜filter
          新增计算函数calc
          新增过渡transition
          新增2D转换transform
          新增动画animation
          新增3D转换
          新增background-size调整背景图大小
          新增背景颜色线性渐变linear-gradient
          新增媒体查询Media Query
          新增classList属性,具体使用见JavaScript基础
      */

      /* 属性选择器[]
          1.[属性] 选择具有该属性的元素
          2(重点).[属性=值] 选择具有该属性且属性值等于给出值的元素
          3.[属性^=值] 选择具有该属性且属性值以给出值开头的元素
          4.[属性$=值] 选择具有该属性且属性值以给出值结尾的元素
          5.[属性*=值] 选择具有该属性且属性值含有给出值的元素
      */
      /* 1.[属性] 选择具有该属性的元素 */
      input[value] {
        color: red;
      }
      /* 2(重点).[属性=值] 选择具有该属性且属性值等于给出值的元素 */
      input[type="tel"] {
        color: aqua;
      }
      /* 3.[属性^=值] 选择具有该属性且属性值以给出值开头的元素 */
      input[type^="em"] {
        color: blueviolet;
      }
      /* 4.[属性$=值] 选择具有该属性且属性值以给出值结尾的元素 */
      input[type$="ch"] {
        color: pink;
      }
      /* 5.[属性*=值] 选择具有该属性且属性值含有给出值的元素 */
      input[type*="ur"] {
        color: brown;
      }

      /* 结构伪类选择器:
          1.E:first-child 选择父类的第一个子元素E
          2.E:last-child 选择父类的最后一个子元素E
          3.E:nth-child(n) 选择父类的第n个子元素E
              n可以是数字
              n可以是even偶数，odd奇数等关键字
              n可以是公式，n可以选择所有子元素（不能是其他字母）,n从0开始
          4.E:first-of-type 选择指定类型E的第一个
          5.E:last-of-type 选择指定类型E的最后一个
          6.E:nth-of-type(n) 选择指定类型E的第n个
              n可以是数字
              n可以是even偶数，odd奇数等关键字
              n可以是公式，n可以选择所有子元素（不能是其他字母）,n从0开始
          
          1、2、3和4、5、6的区别：
            前者会优先找满足E:后面要求的元素，再回头找满足E要求的，可能会出现没有对象的情况
            后者优先找满足E要求的，再在找到的里面找满足E:后面要求的
      */
      /* 1.E:first-child 选择父类的第一个子元素E */
      .new-input ul li:first-child {
        background-color: pink;
      }
      /* 2.E:last-child 选择父类的最后一个子元素E */
      .new-input ul li:last-child {
        background-color: orange;
      }
      /* 3.E:nth-child(n) 选择父类的第n个子元素E,n可以是数字，关键字和公式 */
      /* n是数字 */
      .new-input ul li:nth-child(4) {
        background-color: orangered;
      }
      /* n是关键字 */
      .new-input ul li:nth-child(even) {
        font-weight: 700;
      }
      .new-input ul li:nth-child(odd) {
        font-style: italic;
      }
      /* n是公式 */
      .new-input ul li:nth-child(n) {
        border: 1px solid #000;
        margin: 1px;
        padding: 1px;
      }

      /* 1、2、3和4、5、6的区别：
            前者会优先找满足E:后面要求的元素，再回头找满足E要求的，可能会出现没有对象的情况
            后者优先找满足E要求的，再在找到的里面找满足E:后面要求的 */
      .type-select {
        width: 250px;
        border: 1px solid #000;
        margin: 50px auto;
      }
      /* 4.E:first-of-type 选择指定类型E的第一个 */
      .type-select section:first-of-type {
        background-color: #ccc;
      }
      /* 可以看到以下效果没有实现 */
      .type-select section:first-child {
        background-color: red;
      }
      /* 5.E:last-of-type 选择指定类型E的最后一个 */
      .type-select div:last-of-type {
        background-color: #ddd;
      }
      /* 可以看到以下效果没有实现 */
      .type-select div:last-child {
        background-color: red;
      }
      /* 6.E:nth-of-type(n) 选择指定类型E的第n个 */
      .type-select div:nth-of-type(-n + 1) {
        background-color: red;
      }

      /* 伪元素选择器（重要）::
          brfore在父元素前创建元素
          after在父元素后创建元素
          两者都属于行元素，创建的元素在文档中是找不到的，必须有content属性
      */
      .Pseudoelement-select {
        width: 250px;
        border: 1px solid #000;
        margin: 50px auto;
      }
      .Pseudoelement-select::before {
        content: "我";
      }
      .Pseudoelement-select::after {
        content: "学习";
      }

      /* 盒子模型box-sizing */
      .box-model {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 50px auto;
        border: 20px solid deepskyblue;
        padding: 15px;
        /* CSS3通过box-sizing指定盒子模型，有两个值
            1.content-box(默认),盒子大小为width+padding+border
            2.border-box,盒子大小为width
              该模型就不会被padding和border拉大盒子了(前提是padding和border不超过width)
        */
        box-sizing: border-box;
      }

      /* 滤镜filter */
      .filter-test {
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
        margin: 50px auto;
        /* blur是一个函数，数值越大越模糊 */
        filter: blur(1px);
      }
      .filter-test:hover {
        filter: blur(0);
      }

      /* 计算函数calc
          括号内可以加+-*/
      .calc-father {
        width: 200px;
        height: 200px;
        background-color: green;
        margin: 50px auto;
      }
      .calc-son {
        width: calc(100% - 60px);
        height: calc(100% - 60px);
        background-color: deeppink;
        text-align: center;
        margin: 0 auto;
      }

      /* 过渡transition
          通常与:hover搭配使用
          transition:要过渡的属性 花费时间 运动曲线 何时开始
          1.要过渡的属性：想要变化的CSS属性，宽度高度、背景颜色、内外边距都可以，如果想要所有的属性都变化，写all
          2.花费时间：单位是秒（必须写单位）比如0.5s
          3.运动曲线：默认ease
          4.何时开始：单位是秒（必须）可以设置延时触发时间，默认为0s
          谁做过渡给谁加
      */
      .transition-test {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px auto;
        transition: all 1s 0.2s;
      }
      .transition-test:hover {
        width: 400px;
        height: 400px;
        background-color: green;
      }
      .transition-test2 {
        width: 150px;
        height: 15px;
        border: 1px solid red;
        border-radius: 7px;
        margin: 50px auto;
        padding: 1px;
      }
      .transition-test2-in {
        width: 30%;
        height: 100%;
        background-color: red;
        border-radius: 7px;
        transition: width 1s 0.2s;
      }
      .transition-test2-in:hover {
        width: 100%;
      }

      /* 2D转换transform 
          1.复合写法：transform: translate(x,y) rotate(ndeg) scale(n)
          2.其顺序影响效果
          3.一般有位移的放前面
      */

      /* transform: translate(x,y),其中x为在x轴移动，越大越右；y为在y轴移动，越大越下
            1.如果想只在x轴移动，可以用transform: translateX(n);
              如果想只在y轴移动，可以用transform: translateY(n); 
            2.该方式进行变化不会影响其他盒子
            3.translate中的值用百分比的话，是相对于自身的
            4.对于行元素无效
      */
      .transform-2d {
        overflow: hidden;
        position: relative;
        width: 200px;
        height: 200px;
        background-color: #ddd;
        margin: 50px auto;
      }
      /* translate实现盒子垂直居中 */
      .transform-2d-in {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        background-color: #aaa;
        transform: translate(-50%, -50%);
      }
      /* transform: rotate(ndeg)；n为正数，顺时针旋转；n为负数，逆时针旋转
         transform-origin: x y;设置旋转中心点 x、y可以是方位名词、百分比、px;默认为center center/50% 50%*/
      .transform-2d-rotate {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        background-color: pink;
        transform: translate(-50%, -50%) rotate(45deg);
        transition: all 1s 0.2s;
        transform-origin: center center;
      }
      .transform-2d-rotate:hover {
        transform-origin: top left;
        transform: translate(-50%, -50%) rotate(405deg);
      }
      .transform-2d::before {
        content: "233";
        display: block;
        width: 100%;
        height: 100%;
        background-color: hotpink;
        transform: rotate(180deg);
        transform-origin: left bottom;
        transition: all 1s;
      }
      .transform-2d:hover:before {
        transform: rotate(0deg);
      }
      /* transform: scale(x,y);其中x宽度倍数，y高度倍数
          1.1是1倍，2是2倍，0.5是0.5倍
          2.如果只写一个参数，则另一个相同
          3.不影响其他盒子 
      */
      .transform-2d-scale {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        background-color: saddlebrown;
        transform-origin: left top;
        transition: all 1s;
      }
      .transform-2d-scale:hover {
        transform: scale(4);
      }

      /* 动画animation 
          步骤：
              1.定义动画
              2.元素使用动画*/

      /* 1.定义动画 */
      /* move是自定义动画名 */
      @keyframes move {
        /* 开始状态 from等同于0% */
        0% {
          transform: translateX(0px);
        }
        25% {
          transform: translateY(-2000px) rotate(720deg);
          background-color: skyblue;
        }
        50% {
          transform: translate(1000px, -2000px) scale(2);
          background-color: blue;
        }
        75% {
          transform: translateX(1000px) scale(1);
          background-color: skyblue;
        }
        /* 结束状态 to等同于100%*/
        100% {
          transform: translateX(0px);
          background-color: blue;
        }
      }
      /* 2.元素使用动画 */
      .animation-test {
        width: 200px;
        height: 200px;
        background-color: blue;
        /* 调用动画 */
        animation-name: move;
        /* 动画持续时间 */
        animation-duration: 8s;
        /* 运动曲线 
            默认ease 先加速后减速
            linear 全程匀速
            ease-in 低速开始
            ease-out 低速结束
            ease-in-out 低速开始结束
            steps() 指定了时间函数中的间隔数量（步长）跳着走的感觉*/
        animation-timing-function: linear;
        /* 延迟开始 默认0*/
        animation-delay: 2s;
        /* 动画播放次数 默认1,infinite无数次*/
        animation-iteration-count: infinite;
        /* 是否逆向播放 
            默认normal,播放完会瞬间回到原位置
            逆向alternate，播放完会原路返回播放*/
        animation-direction: alternate;
        /* 规定动画状态
            默认running运行，可以pause暂停动画 */
        animation-play-state: running;
        /* 规定动画结束后状态
            保持结束状态forward
            回到最初状态backwards(默认) */
        animation-fill-mode: backwards;
        /* 复合写法 */
        /* animation: name duration timing-function delay iteration-count direction fill-mode;
        animation: 动画名 持续时间 运动曲线 延迟开始  播放次数 是否逆向 结束状态
        animation-play-state不写在复合写法中
        前两个属性是必须要写的 */
      }
      .animation-test:hover {
        animation-play-state: paused;
      }

      /* 3D转换 */
      .transform-3d {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: #aaa;
        margin: 50px auto;
        /* 透视perspective
            数值越大看物品越小 */
        perspective: 500px;
      }

      /* 3D位移:translate3d(x,y,z) */
      .transform-3d-in {
        width: 50px;
        height: 50px;
        background-color: rebeccapurple;
        /* 3D位移:translate3d(x,y,z)
            1.只在z轴上移动translateZ(npx),数值单位一般用px
            2.z数值越大，离人越近，看起来越大
            3.该复合写法中xyz不能省略，没有就写0
            4.需要搭配透视perspective使用,透视要写到父元素上
        */
        transform: translate3d(0, 100px, 200px);
      }

      /* 3D旋转：rotate3d(x,y,z,deg) */
      .transform-3d-rotate {
        width: 50px;
        height: 50px;
        background-color: red;
        transition: all 8s;
      }
      .transform-3d-rotate:hover {
        /* transform: rotateX(360deg); */
        /* transform: rotateY(360deg); */
        transform: rotateZ(360deg);
      }

      /* 3D呈现transform-style 
          控制子元素是否开启三维立体环境
          默认flat不开启
          preserve-3d开启
          该属性虽然给父盒子使用，但影响子盒子
      */
      .transform-style-test {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        transition: all 6s;
        transform: translate(-50%, -50%);
        transform-style: preserve-3d;
      }
      .transform-style-test:hover {
        transform: translate(-50%, -50%) rotateX(60deg) rotateY(60deg);
      }
      .transform-style-one {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        background-color: #000;
        transform: translate(-50%, -50%);
      }
      .transform-style-two {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        background-color: #fff;
        transform: translate(-50%, -50%) rotateX(60deg);
      }

      /* 旋转木马案例 */
      .case {
        perspective: 1000px;
      }
      .merry-go-round {
        position: relative;
        width: 300px;
        height: 200px;
        margin: 150px auto;
        animation: rotate 8s linear infinite;
        transform-style: preserve-3d;
      }
      .merry-go-round:hover {
        animation-play-state: paused;
      }
      @keyframes rotate {
        0% {
          transform: rotateY(0);
        }
        100% {
          transform: rotateY(360deg);
        }
      }
      .merry-go-round div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/473973.png) no-repeat;
        background-size: cover;
      }
      .merry-go-round div:first-child {
        transform: rotateY(0) translateZ(300px);
      }
      .merry-go-round div:nth-child(2) {
        transform: rotateY(60deg) translateZ(300px);
      }
      .merry-go-round div:nth-child(3) {
        transform: rotateY(120deg) translateZ(300px);
      }
      .merry-go-round div:nth-child(4) {
        transform: rotateY(180deg) translateZ(300px);
      }
      .merry-go-round div:nth-child(5) {
        transform: rotateY(240deg) translateZ(300px);
      }
      .merry-go-round div:last-child {
        transform: rotateY(300deg) translateZ(300px);
      }

      /* background-size调整背景图大小
            1. 两个px值，第一个宽度，第二个高度；如果只给一个值，则另一个auto
            2.百分比相对于背景定位区域，第一个宽度，第二个高度；如果只给一个值，则另一个auto
            3.cover保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
            4.contain保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小*/
      .background-size-test {
        display: flex;
        height: 500px;
        margin: 50px auto;
      }
      /* background-size值为contain */
      .background-size-test1 {
        width: 500px;
        height: 500px;
        background: url(../images/473973.png) no-repeat;

        background-size: contain;
      }
      /* background-size值为cover */
      .background-size-test2 {
        width: 500px;
        height: 500px;
        background: url(../images/473973.png) no-repeat;
        background-size: cover;
        margin-left: 10px;
      }
      /* background-size值为百分比 */
      .background-size-test3 {
        width: 500px;
        height: 500px;
        background: url(../images/473973.png) no-repeat;
        background-size: 80% 30%;
        margin-left: 10px;
      }
      /* background-size值为px */
      .background-size-test4 {
        width: 500px;
        height: 500px;
        background: url(../images/473973.png) no-repeat;
        background-size: 400px 150px;
        margin-left: 10px;
      }

      /* 背景颜色线性渐变linear-gradient
           1.使用需要加浏览器私有前缀，如-webkit-
           2.linear-gradient(direction, color-stop1, color-stop2, ...)
              direction指定渐变的方向,可用方位名词（如 left top）或角度值（如 45deg），如果不指定方向，默认从上到下渐变
              color-stop color使用关键字red、rgba等颜色值（透明也可以设置）stop是这个颜色块终止位置，换句话说就是这块颜色占的区域*/
      .bg-linear-gradient-test {
        width: 200px;
        height: 200px;
        background: -webkit-linear-gradient(
          left top,
          red 13%,
          orange 26%,
          yellow 39%,
          green 52%,
          #00ffff 65%,
          blue 78%,
          purple 100%
        );
        margin: 50px auto;
      }

      /* 媒体查询Media Query
            可以根据不同的屏幕尺寸使用不同的样式
         语法规范
            @media mediatype and|not|only (media feature){CSS-Code}
            @media开头，必须
            mediatype 媒体类型，screen用于电脑、平板、手机的屏幕（常用），all用于所有设备，print用于打印设备
            and|not|only 关键字，and相当于和，not相对于非，only指定某个
            media feature 媒体特性，必须要小括号包含,width定义可见区域的宽度，max-width定义最大可见区域，min-width定义最小可见区域
          引入资源
            如果需要根据屏幕大小使用不同的CSS等资源,写法如下
            <link rel="stylesheet" href="#" media="mediatype and|not|only (media feature)">
            */
      .media-query-test {
        width: 200px;
        height: 200px;
        background-color: #000;
        margin: 50px auto;
      }
      @media screen and (max-width: 1500px) {
        .media-query-test {
          background-color: purple;
        }
      }
      @media screen and (max-width: 1000px) {
        .media-query-test {
          background-color: aqua;
        }
      }
    </style>
  </head>
  <body>
    <!-- 新增语义化标签 
        <header>头部标签
        <nav>导航标签
        <article>内容标签
        <section>定义文档某个区域
        <aside>侧边栏标签
        <footer>尾部标签
          特点： 
                1.针对搜索引擎
                2.在一个页面内可以使用多次
                3.IE9中，需要把这些元素转换为块元素
                4.因为兼容性问题，移动端更适合使用
    -->

    <!-- 新增多媒体标签
          1.<video> 视频
              建议视频文件使用 MP4格式
              src视频url地址
              controls设置控制器，不同浏览器默认控制器不同，一般自己做控制器
              autoplay实现自动播放
              muted实现禁音播放
              loop实现循环播放
              preload预加载视频，值为auto加载，none不加载，如果有设置自动播放，忽略该属性
              poster设置加载等待的图片
          2.<audio> 音频 
              建议音频文件使用 MP3格式
              src视频url地址
              controls设置控制器，不同浏览器默认控制器不同，一般自己做控制器
              autoplay实现自动播放
              loop实现循环播放
              muted实现禁音播放
    -->
    <video
      src="../video/v1-0.mp4"
      width="50%"
      autoplay
      muted
      loop
      poster="../images/text.jpg"
    ></video>
    <audio
      src="../audio/Andreas Waldetoft Mia Stegmar - Faster Than Light.mp3"
      controls
      loop
      preload="auto"
    ></audio>

    <!-- 新增input类型如下-->
    <!-- 新增表单属性
        required设置该内容必填
        placeholder提示文本，默认不显示
        autofocus页面加载完成自动聚焦到该内容
        multiple可以多选文件提交
        autocomplete成功提交后的内容再下一次进行书写时自动显示，要求含有name属性,默认为打开   -->
    <form action="#" class="new-input child-select">
      <!-- 该表单进行了属性选择器[]，结构伪类选择器:前三种的使用 -->
      <ul>
        <li>数字：<input type="number" value="233" /></li>
        <li>手机号码：<input type="tel" /></li>
        <li>
          搜索框：<input
            type="search"
            name="sear"
            required
            placeholder="请输入内容进行搜索"
            autofocus
          />
        </li>
        <li>邮箱：<input type="email" /></li>
        <li>URL：<input type="url" /></li>
        <li>日期：<input type="date" /></li>
        <li>时间：<input type="time" /></li>
        <li>月：<input type="month" /></li>
        <li>周：<input type="week" /></li>
        <li>颜色选择：<input type="color" /></li>
        <li><input type="file" name="upload" multiple /></li>
        <li><button>提交</button></li>
      </ul>
    </form>
    <!-- 该区域进行了结构伪类选择器:后三种的使用 -->
    <article class="type-select">
      <div>div1</div>
      <div>div2</div>
      <section>section1</section>
      <section>section2</section>
    </article>
    <!-- 该区域进行了伪元素选择器:: 的使用-->
    <article class="Pseudoelement-select">爱</article>
    <!-- 盒子模型box-sizing -->
    <article class="box-model">盒子模型box-sizing</article>
    <!-- 滤镜filter -->
    <article class="filter-test">滤镜filter</article>
    <!-- 计算函数calc -->
    <article class="calc-father">
      <section class="calc-son">计算函数calc</section>
    </article>
    <!-- 过渡transition -->
    <article class="transition-test">过渡transition</article>
    <article class="transition-test2">
      <section class="transition-test2-in"></section>
    </article>
    <!-- 2D转换transform -->
    <section class="transform-2d">
      <section class="transform-2d-in"></section>
      <section class="transform-2d-rotate">看我旋转</section>
      <section class="transform-2d-scale">看我缩放</section>
    </section>
    <!-- 动画animation -->
    <section class="animation-test"></section>
    <!-- 3D转换transform -->
    <section class="transform-3d">
      <section class="transform-3d-in"></section>
      <section class="transform-3d-rotate"></section>
      <section class="transform-style-test">
        <section class="transform-style-one"></section>
        <section class="transform-style-two"></section>
      </section>
    </section>
    <!-- 旋转木马案例 -->
    <article class="case">
      <section class="merry-go-round">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </section>
    </article>
    <!-- background-size调整背景图大小 -->
    <section class="background-size-test">
      <div class="background-size-test1">background-size值为contain</div>
      <div class="background-size-test2">background-size值为cover</div>
      <div class="background-size-test3">background-size值为百分比</div>
      <div class="background-size-test4">background-size值为px</div>
    </section>
    <!-- 背景颜色线性渐变linear-gradient -->
    <section class="bg-linear-gradient-test"></section>
    <!-- 媒体查询Media Query -->
    <section class="media-query-test">缩小窗口变颜色</section>
  </body>
</html>
